<template>
<section class="banner-carousel min-h300">
  <el-carousel height="400px" :interval="bannersSwitch>1?5000:60000">
    <el-carousel-item v-for="(item, index) in bannerList" :key="index">
      <div class="banner-bg" v-if="bannersSwitch === 2" :style="{'background-image': `url(${item.full_imgurl})`}"></div>
      <div class="banner-bg" v-if="bannersSwitch === 3" :style="{'background-image': `url(${item})`}"></div>
      <div class="banner-img pac hand" v-if="bannersSwitch === 2 || bannersSwitch === 3">
        <!-- <img :src="item.full_imgurl" v-if="bannersSwitch === 2" @click.stop="openUrl(item.linkurl)"/>
        <img :src="item" v-if="bannersSwitch === 3" /> -->
        <el-image :src="item.full_imgurl" v-if="bannersSwitch === 2" @click.stop="openUrl(item.linkurl)" class="full">
          <div slot="placeholder" class="pac"><i class="el-icon-loading primary fs-xl"></i></div>
          <div slot="error" class="pac"><i class="el-icon-loading primary fs-xl"></i></div>
        </el-image>
        <el-image :src="item" v-if="bannersSwitch === 3" class="full">
          <div slot="placeholder" class="pac"><i class="el-icon-loading primary fs-xl"></i></div>
          <div slot="error" class="pac"><i class="el-icon-loading primary fs-xl"></i></div>
        </el-image>
      </div>
      <div class="banner-iframe" v-if="bannersSwitch === 0 || bannersSwitch === 1">
        <iframe
          :src="item.panoview_url"
          v-if="bannersSwitch === 0"
          frameborder="0"
          style="width:100%; height:100%; border:none;"
        ></iframe>
        <iframe
          :src="item"
          v-if="bannersSwitch === 1"
          frameborder="0"
          style="width:100%; height:100%; border:none;"
        ></iframe>
      </div>
    </el-carousel-item>
  </el-carousel>
</section>
</template>

<script>
export default {
  props: {
    typeid: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      bannerConfig: $globalconfig.VGO_MOBILE_CONFIG.banners,
      page: 1,
      pageSize: 3,
      bannersSwitch: 3,
      bannerList: [],
    }
  },
  created() {
    this.getBannerPictures()
  },
  methods: {
    openUrl (url) {
      if (url) {
        window.open(url)
      }
    },
    // 首页banner图获取方式
    async getBannerPictures () {
      let swiperSwitch = await this.$api.getBannersSwitch()
      // console.log(swiperSwitch)
      swiperSwitch = swiperSwitch.data
      // pano_swiper_rand_isopen:true为获取全景图，false为获取普通图片
      swiperSwitch.pano_swiper_rand_isopen = false
      if (swiperSwitch && swiperSwitch.pano_swiper_rand_isopen) {
        // 获取随机全景图
        this.bannersSwitch = 0
        let vrPic = await this.$api.getBannersVrpic(this.pageSize)
        // console.log(vrPic)
        this.bannerList = vrPic.data
      } else {
        if ($globalconfig.VGO_MOBILE_CONFIG.is_fixed_vrbanner) {
          // 获取固定全景图
          this.bannersSwitch = 1
          this.bannerList = $globalconfig.VGO_MOBILE_CONFIG.banners
        } else if ($globalconfig.VGO_MOBILE_CONFIG.is_user_banner) {
          // 获取用户上传的普通图片
          this.bannersSwitch = 2
          let pic = await this.$api.getBannersPic(
            this.page,
            this.pageSize,
            this.typeid
          )
          // console.log(pic)
          this.bannerList = pic.data.list
        } else {
          // 获取固定的普通图片
          this.bannersSwitch = 3
          if ($globalconfig.VGO_MOBILE_CONFIG.banners.length > 0) {
            this.bannerList = $globalconfig.VGO_MOBILE_CONFIG.banners
          }
        }
      }
    },
    getInfo() {
      this.$api.getBannersSwitch().then(res => {
        console.log(res)
        // pano_swiper_rand_isopen
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.banner-carousel
  height 400px
  position relative
  overflow hidden
  .banner-img
    width 1200px
    height 400px
    margin 0 auto
    overflow hidden
    img
      width 100%
      height 100%
  .banner-iframe
    width 100%
    height 400px
    margin 0 auto
    overflow hidden
  .banner-bg
    width 150%
    height 150%
    background-position 50%
    background-repeat no-repeat
    background-size 150% 150%
    -webkit-filter blur(50px)
    filter blur(50px)
</style>